import React from 'react' 
 import Breadcrumb from '../../component/Breadcrumb/Breadcrumb'
import './css/Breadcrumb_Demo.css'  
class Breadcrumb_Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }   

    componentWillMount = () => {  

      } 
    componentDidMount = () => { 
        // this.refs.breadcrumb.config.itemDefaultClick ( this.info.curIndex )
        // this.refs.breadcrumb.config.itemDefaultClick (2 )
        
     }   

    info={   
       boxW:document.documentElement.clientWidth || document.body.clientWidth,
       boxH:document.documentElement.clientHeight || document.body.clientHeight,
       curIndex:0, 
        content:[//下面内容块 对应的数据
             {
                 name:'第一级内容',
                 data:[{
                     name:"跳转第二级1"
                 },{
                     name:"跳转第二级2"
                 },{
                     name:"跳转第二级3"
                 }],
                 itemClick:()=>{
                     this.refs.breadcrumb.config.itemDefaultClick (1)
                 }
             },{
                 name:'第二级内容',
                 data:[ {
                     name:"跳转第三级1"
                 },{
                     name:"跳转第三级2"
                 }],
                 itemClick:()=>{
                     this.refs.breadcrumb.config.itemDefaultClick (2)
                 }
             },
             {
                 name:'第三级内容',
                 data:[ {
                     name:"跳转第四级1"
                 }],
                 itemClick:()=>{
                     this.refs.breadcrumb.config.itemDefaultClick (3)
                 }
             }, 
             {
                 name:'第四级内容',
                 data:[ {
                     name:"跳转第四级"
                 }],
                itemClick:()=>{
                      console.log()
                 }
             }
         ]
     }
    // 面包屑相关配置
    breadcrumbConfig = { 
        data:[//面包屑展示数据
            {
                name:'第一级',
                val:0
            },
            {
                name:'第二级',
                val:1
            },
                {
                name:'第三级',
                val:2 
            },
                {
                name:'第四级',
                val:3
            }
        ],
        style: {
            boxW:this.info.boxW,
            boxH:40
        },
        itemClick: (i) =>{//调用 点击面包屑 的方法 
            this.info.curIndex=i;  
            //   this.refs.breadcrumb.config.itemDefaultClick (this.info.curIndex )
            this.setState()
              
        }
    }
   
    render() {  
        // this.info.curIndex = this.breadcrumbConfig.data.length-1 ;
   
        return (
            <div className='Breadcrumb_Demo'  > 
                <Breadcrumb ref = 'breadcrumb' config = {this.breadcrumbConfig}  ></Breadcrumb>  
                <div className='content'  style={{height:this.info.boxH-this.breadcrumbConfig.style.boxH}}>
                {
                    this.info.content.map((item,i) =>{
                        return (
                            <dl style={{left:(-100*(this.info.curIndex-i))+'%',width:'100%',   position: 'absolute',    transition:' left .3s ease-in-out'}}>
                                <dt>{item.name}</dt>
                                {
                                    item.data.map((jtem,j)=>{
                                        return (
                                            <dd onClick={item.itemClick}>
                                                {jtem.name}
                                            </dd>
                                        )
                                    })
                                }
                            </dl>
                        )
                    })
                } 
                </div>
            </div> 
         )
    }
}

export default Breadcrumb_Demo
